<template>
  <div class="shopcar">
    <!-- 返回上一页 -->
    <van-nav-bar title="购物车" left-text="返回" left-arrow @click-left="back"></van-nav-bar>

    <!-- 清空购物车按钮 -->
    <div class="button-group">
      <van-button class="removeAll" type="danger" size="small" @click="removeAll">清空购物车</van-button>
    </div>

    <!-- 无购物车列表 -->
    <template v-if="goodsList.length===0">
      <div class="noList">
         <div class="message">
        <van-icon class="icon" name="shopping-cart-o"></van-icon>
        <span class="text">暂无商品~</span>
      </div>
      </div>
     
    </template>

    <!-- 有购物车列表 -->
    <template>
      <van-swipe-cell class="swipeCell" v-for="(item,idx) of goodsList" :key="idx">
        <div class="card">
          <van-checkbox class="checkBox" v-model="item.isChecked"></van-checkbox>

          <van-image class="image" :src="item.img" />

          <div class="center">
            <div class="name">{{item.name}}</div>
            <div class="type">规格：{{item.sku}}</div>
            <div class="bottom">
              <p class="price">{{item.price | toFixed | rmb}}</p>
              <div class="num">
                <van-stepper v-model="item.num" integer />
              </div>
            </div>
          </div>
        </div>
        <template slot="right">
          <van-button class="delate" @click="removeItem(idx)" square type="danger" text="删除" />
        </template>
      </van-swipe-cell>
    </template>

    <!-- 提交订单栏 -->
    <van-submit-bar :price="allTotal" button-text="提交订单">
      <van-checkbox v-model="allChecked">全选</van-checkbox>
    </van-submit-bar>

    <tab-bar></tab-bar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      goodsList: []
    };
  },

  methods: {
    back() {
      this.$router.go(-1);
    },

    getShopCarList() {
      //获取购物车商品数据
      this.goodsList = JSON.parse(localStorage.getItem("goodsList"));
      // console.log(this.goodsList)
    },
    removeItem(idx) {
      //删除对应商品
      let goodsList = JSON.parse(localStorage.getItem("goodsList"));
      this.$dialog
        .confirm({
          title: "删除商品",
          message: "是否要删除该商品？"
        })
        .then(() => {
          this.goodsList.splice(idx, 1); //这里的goodsList是data里面的数据
          goodsList.splice(idx, 1); //这里的goodsList是本地缓存数据
          localStorage.setItem("goodsList", JSON.stringify(goodsList));
          this.$toast.success("删除成功");
        })
        .catch(() => {
          // on cancel
        });
    },

    removeAll() {
      //清空购物车
      let goodsList = JSON.parse(localStorage.getItem("goodsList"));
      this.$dialog
        .confirm({
          title: "删除全部商品",
          message: "是否要删除全部商品？"
        })
        .then(() => {
          this.goodsList = []; //清空data
          goodsList = [];
          localStorage.setItem("goodsList", JSON.stringify(goodsList));
        })
        .catch(() => {
          // on cancel
        });
    }
  },
  activated() {
    this.getShopCarList();
  },
  computed: {
    allChecked: {
      //全选

      get() {
        let bool;
        if (this.goodsList.length) {
          bool = this.goodsList.every(item => {
            return item.isChecked;
          });
        } else {
          bool = false;
        }
        return bool;
      },
      set(newVal) {
        if (!newVal) {
          return this.goodsList.map(item => {
            item.isChecked = false;
          });
        } else {
          return this.goodsList.map(item => {
            item.isChecked = true;
          });
        }
      }
    },
    allTotal() {
      //总计
      let sum = 0;
      this.goodsList.forEach(item => {
        if (item.isChecked) {
          //若勾选的就计算
          sum += item.price * item.num;
        }
      });
      return sum * 100;
    }
  }
};
</script>

<style lang="scss">
@import "@/style/shopcar/shopcar.scss";
</style>